<template>
  <div>
    <!-- onlyOffice在线预览 -->
    <el-watermark :font="font" :content="watermarkTxt">
      <div class="Online" v-loading="iframeLoading">
        <div style="width: 100%">
          <div class="Online_title">
            <div class="logos">
              <Logo :collapse="isCollapse"></Logo>
            </div>
            <div class="titles">
              <span class="titles_1">{{ fileDetail?.fileName }}</span>
              <span class="historyText" v-if="route.query?.versionId"> - (历史版本:{{ fileDetail?.versionNameValue
                }})</span>
            </div>

            <div class="userClass">
              <div class="edit-btn">
                <el-button v-if="fileDetail.edit" type="primary" size="small" @click="handlerEdit">编辑</el-button>
                <el-button v-if="fileDetail.libraryType != 'archives'" :disabled="!fileDetail.download" type="success"
                  size="small" @click="handlerDownload">下载</el-button>
              </div>
              <div class="avatar-wrapper">
                <!-- <user-avatar></user-avatar> -->
              </div>
            </div>
          </div>
        </div>
        <!-- 文档预览的位置 -->

        <div id="placeholder" ref="pdfframe"></div>
      </div>
    </el-watermark>

  </div>
</template>

<script setup lang='ts'>
import Logo from '@/layout/components/Sidebar/Logo.vue'
import useAppStore from '@/store/modules/app'
import onlinePreviewApi from '@/api/onlinePreview/onlinePreviewApi'
import useUserStore from '@/store/modules/user'
const font = reactive({
  color: 'rgba(0, 0, 0, .15)',
})
const watermarkTxt = ref("")
const { proxy } = getCurrentInstance() as any

const appStore = useAppStore()
const isCollapse = computed(() => !appStore.sidebar.opened)
const route = useRoute()
const router = useRouter()
const onlineSrc = ref("")

const iframeLoading = ref(false)
const fileDetail: any = ref({})
const userStore = useUserStore()
console.log(userStore)
const getFileDataInfo = () => {
  let params = {
    moduleId: route.query.moduleId,//文件id
    versionId: route.query.versionId,//文件版本
    type: route.query.type,//类型 不同模块库编码
    previewType: "onlyOffice",
    info: {
      type: route.query.shareType,
      id:route.query.shareId
    }
  }
  onlinePreviewApi.getFileDataInfo(params).then((res: any) => {
    if (res.code == '200') {
      onlineSrc.value = res.data.url
      fileDetail.value = res.data
      fileDetail.value.versionNameValue = proxy.$moment(fileDetail.versionName).format('YYYY-MM-DD HH:mm:ss')
      watermarkTxt.value = res.data.watermarkTxt

      const s = document.createElement("script")
      s.type = "text/javascript"
      // s.src = 'http://' + res.data.previewServer + "/web-apps/apps/api/documents/api.js";
      s.src = res.data.previewServer + "/web-apps/apps/api/documents/api.js"
      document.body.appendChild(s)

      setTimeout(() => {
        var config = {
          document: {
            fileType: fileDetail.value.fileSuffix.replace('.', ''),
            key: route.query.onlineType + fileDetail.id + route.query.versionId ? route.query.versionId : fileDetail.versionId,
            title: " ",
            url: onlineSrc.value,
            permissions: {
              download: false,
              print: false,
              modifyFilter: false
            }
          },
          // permissions: {
          //   print: false,
          //   download: false,
          //   modifyFilter: false
          // },
          documentType: fileDetail.documentType,
          editorConfig: {
            lang: "zh-CN",
            mode: "view",
            callbackUrl: "",
            customization: {
              logo: {
                image: "logoUrl",
                imageDark: "logoUrl",
                url: window.location.origin
              },
              customer: {
                address: "",
                info: "",
                logo: "logoUrl",
                logoDark: "logoUrl",
                mail: "sales@cdeden.cn",
                name: "成都伊登软件有限公司",
                phone: "028-85230818",
                www: "http://cdeden.cn/"
              },
              help: false
            },
            user: {
              id: userStore.userId,
              name: `${userStore.nickname}(${userStore.userId})`
              // name: `admin123`
            }
          }
        }
        //@ts-ignore
        var docEditor: any = new DocsAPI.DocEditor("placeholder", config)

        // nextTick(() => {
        //      this.$store.state.user.coverLogoDiv = true;
        //   });
      }, 1000)
    }

  })
}

// 跳转编辑
const handlerEdit = () => {
  let params = {
    moduleId: route.query.moduleId,//文件id
    versionId: route.query.versionId,//文件版本
    type: route.query.type,//类型 不同模块库编码
  }
  router.push({ path: "/onlineEdit-onlyOffice", query: params })
}
// 下载
const handlerDownload = () => {
  proxy?.$download.downloadFile([route.query.moduleId], route.query.type)
}

onMounted(() => {
  getFileDataInfo()
})
</script>
<style scoped lang='scss'>
$height1: calc(100vh - 54px);

.pageVue {
  height: $height1;
}

.Online {
  height: calc(100vh - 50px);
  width: 100%;
  position: relative;
}

.Online_title {
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  border-bottom: 1px solid #e6e6e6;

  .titles {
    padding: 0 4px 2px;
  }

  .titles_1 {
    border-bottom: 1px #626262 solid;
  }

  .historyText {
    font-size: 12px;
    color: #999;
    margin-top: 6px;
    text-align: center;
  }

  .userClass {
    display: flex;
    align-items: center;
  }

  .edit-btn {
    margin-right: 20px;
  }

  .avatar-wrapper {
    // margin-top: 5px;
    // position: relative;

    .user-avatar {
      cursor: pointer;
      width: 40px;
      height: 40px;
      border-radius: 10px;
    }
  }
}

.iframeClass {
  width: 100%;
  height: $height1;
}

#placeholder {
  width: 100%;
  height: calc(100vh - 50px)
}
</style>